<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>
			小米商城 - 小米11 Ultra、Redmi K40 Pro、MIX FOLD，小米电视官方网站
		</title>
		<meta name="description" content="小米官网直营小米公司旗下所有产品，包括小米手机系列小米11 Ultra、MIX FOLD，Redmi 红米系列Redmi Note 9、Redmi K40 Pro，小米电视、笔记本、米家智能家居等，同时提供小米客户服务及售后支持.">
		<link rel="stylesheet" type="text/css" href="./css/reset.css"/>
		<link rel="stylesheet" type="text/css" href="./css/index.css"/>
		<link rel="stylesheet" type="text/css" href="./css/base.css"/>
		<link rel="stylesheet" type="text/css" href="./iconfont/iconfont.css"/>
		<!--设置网站图标 -->
		<link rel="icon" href="favicon.ico"/>
	</head>
	<body>
		<div class="fixed-nav">
			<div class="nav-buttom">
				<i class="iconfont icon-category"></i>
				手机App
			</div>
			<div class="nav-buttom">
				<i class="iconfont icon-contacts"></i>
				个人中心
			</div>
			<div class="nav-buttom">
				<i class="iconfont icon-manage-order"></i>
				售后服务
			</div>
			<div class="nav-buttom">
				<i class="iconfont icon-success"></i>
				人工客服
			</div>
			<div class="nav-buttom">
				<i class="iconfont icon-cart-Empty"></i>
				购物车
			</div>
		</div>
		<header>
			<div class="header-nav">
				<div class="nav-content clearfix">
					<div class="left-content">
						<div class="item">
							<a href="#">小米商城</a>
						</div>
						<span>|</span>
						<div class="item">
							<a href="#">MIUI</a>
						</div>
						<span>|</span>
						<div class="item">
							<a href="#">IOT</a>
						</div>
						<span>|</span>
						<div class="item">
							<a href="#">云服务</a>
						</div>
						<span>|</span>
						<div class="item">
							<a href="#">天星数科</a>
						</div>
						<span>|</span>
						<div class="item">
							<a href="#">有品</a>
						</div>
						<span>|</span>
						<div class="item">
							<a href="#">小爱开放平台</a>
						</div>
						<span>|</span>
						<div class="item">
							<a href="#">企业团购</a>
						</div>
						<span>|</span>
						<div class="item">
							<a href="#">资质证照</a>
						</div>
						<span>|</span>
						<div class="item">
							<a href="#">协议规则</a>
						</div>
						<span>|</span>
						<div class="item">
							<a href="#">下载app</a>
							<div id="code-list">
								<img id="code-pic" src="img/code.png">
								小米商城APP
							</div>
						</div>
						<span>|</span>
						<div class="item">
							<a href="#">智能生活</a>
						</div>
						<span>|</span>
						<div class="item">
							<a href="#">select Location</a>
						</div>
					</div>
					<div class="right-content">
						<div class="item">
							<a href="#">登录</a>
						</div>
						<span>|</span>
						<div class="item">
							<a href="#">注册</a>
						</div>
						<span>|</span>
						<div class="item">
							<a href="#">消息通知</a>
						</div>
						<a href="#">
							<div class="shoppingcart item">
								<i class="iconfont icon-cart-Empty" style="font-size: 24px;"></i>
								购物车 (0)
								<div id="cart-list">
									购物车还没有商品，赶紧选购吧!
								</div>
							</div>
						</a>
					</div>
				</div>
			</div>
			<div class="header-nav-2">
				<div class="nav-2-content clearfix">
					<div id="logo">
						<img src="img/icon-小米归属.png" style="width: 56px; height: 56px;" >
					</div>
					<div class="right-content">
						<div class="item2">
							<a href="#">小米手机</a>
							<div class="item2list">
								<div class="list-content">
									<div class="item">
										<img src="./img/pi1.png" >
										<p id="p1">Xiaomi Mix 4</p>
										<p id="p2">4999元起</p>
									</div>
									<div class="line"></div>
									<div class="item">
										<img src="./img/pi1.png" >
										<p id="p1">Xiaomi Mix 4</p>
										<p id="p2">4999元起</p>
									</div>
									<div class="line"></div>
									<div class="item">
										<img src="./img/pi1.png" >
										<p id="p1">Xiaomi Mix 4</p>
										<p id="p2">4999元起</p>
									</div>
								</div>
							</div>
						</div>
						<div class="item2">
							<a href="#">Redmi 红米</a>
							<div class="item2list">
								<div class="list-content">
									<div class="item">
										<img src="./img/pic2.png" >
										<p id="p1">Redmi Note 10 Pro</p>
										<p id="p2">1599元起</p>
									</div>
									<div class="line"></div>
									<div class="item">
										<img src="./img/pic2.png" >
										<p id="p1">Redmi Note 10 Pro</p>
										<p id="p2">1599元起</p>
									</div>
									<div class="line"></div>
									<div class="item">
										<img src="./img/pic2.png" >
										<p id="p1">Redmi Note 10 Pro</p>
										<p id="p2">1599元起</p>
									</div>
								</div>
							</div>
						</div>
						<div class="item2">
							<a href="#">电视</a>
							<div class="item2list">
								<div class="list-content">
									<div class="item">
										<img src="./img/pic3.png" >
										<p id="p1">Redmi Note 10 Pro</p>
										<p id="p2">1599元起</p>
									</div>
									<div class="line"></div>
									<div class="item">
										<img src="./img/pic3.png" >
										<p id="p1">Redmi Note 10 Pro</p>
										<p id="p2">1599元起</p>
									</div>
									<div class="line"></div>
									<div class="item">
										<img src="./img/pic3.png" >
										<p id="p1">Redmi Note 10 Pro</p>
										<p id="p2">1599元起</p>
									</div>
								</div>
							</div>
						</div>
						<div class="item2">
							<a href="#">笔记本</a>
							<div class="item2list">
								<div class="list-content">
									<div class="item">
										<img src="./img/pic4.png" >
										<p id="p1">Redmi Note 10 Pro</p>
										<p id="p2">1599元起</p>
									</div>
									<div class="line"></div>
									<div class="item">
										<img src="./img/pic4.png" >
										<p id="p1">Redmi Note 10 Pro</p>
										<p id="p2">1599元起</p>
									</div>
									<div class="line"></div>
									<div class="item">
										<img src="./img/pic4.png" >
										<p id="p1">Redmi Note 10 Pro</p>
										<p id="p2">1599元起</p>
									</div>
								</div>
							</div>
						</div>
						<div class="item2">
							<a href="#">平板</a>
							<div class="item2list">
								<div class="list-content">
									<div class="item">
										<img src="./img/pic5.png" >
										<p id="p1">Redmi Note 10 Pro</p>
										<p id="p2">1599元起</p>
									</div>
									<div class="line"></div>
									<div class="item">
										<img src="./img/pic5.png" >
										<p id="p1">Redmi Note 10 Pro</p>
										<p id="p2">1599元起</p>
									</div>
									<div class="line"></div>
									<div class="item">
										<img src="./img/pic5.png" >
										<p id="p1">Redmi Note 10 Pro</p>
										<p id="p2">1599元起</p>
									</div>
								</div>
							</div>
						</div>
						<div class="item2">
							<a href="#">家电</a>
							<div class="item2list">
								<div class="list-content">
									<div class="item">
										<img src="./img/pic6.png" >
										<p id="p1">Redmi Note 10 Pro</p>
										<p id="p2">1599元起</p>
									</div>
									<div class="line"></div>
									<div class="item">
										<img src="./img/pic6.png" >
										<p id="p1">Redmi Note 10 Pro</p>
										<p id="p2">1599元起</p>
									</div>
									<div class="line"></div>
									<div class="item">
										<img src="./img/pic6.png" >
										<p id="p1">Redmi Note 10 Pro</p>
										<p id="p2">1599元起</p>
									</div>
								</div>
							</div>
						</div>
						<div class="item2">
							<a href="#">路由器</a>
							<div class="item2list">
								<div class="list-content">
									<div class="item">
										<img src="./img/pic7.png" >
										<p id="p1">Redmi Note 10 Pro</p>
										<p id="p2">1599元起</p>
									</div>
									<div class="line"></div>
									<div class="item">
										<img src="./img/pic7.png" >
										<p id="p1">Redmi Note 10 Pro</p>
										<p id="p2">1599元起</p>
									</div>
									<div class="line"></div>
									<div class="item">
										<img src="./img/pic7.png" >
										<p id="p1">Redmi Note 10 Pro</p>
										<p id="p2">1599元起</p>
									</div>
								</div>
							</div>
						</div>
						<div class="item2">
							<a href="#">智能硬件</a>
							<div class="item2list">
								<div class="list-content">
									<div class="item">
										<img src="./img/pic2.png" >
										<p id="p1">Redmi Note 10 Pro</p>
										<p id="p2">1599元起</p>
									</div>
									<div class="line"></div>
									<div class="item">
										<img src="./img/pic2.png" >
										<p id="p1">Redmi Note 10 Pro</p>
										<p id="p2">1599元起</p>
									</div>
									<div class="line"></div>
									<div class="item">
										<img src="./img/pic2.png" >
										<p id="p1">Redmi Note 10 Pro</p>
										<p id="p2">1599元起</p>
									</div>
								</div>
							</div>
						</div>
						<div class="item2">
							<a href="#">服务</a>
						</div>
						<div class="item2">
							<a href="#">社区</a>
						</div>
						<div class="searchbox">
							<input type="text" name="" id="search" value="小米11" />
							<div id="submitbuttom">
								<i class="iconfont icon-search"></i>
							</div>
						</div>
					</div>
				</div>
			</div>
		</header>
		<main>
			<div class="imgbox">
				<ul class="left-nav">
					<li>
						手机
						<i class="iconfont icon-arrow-right"></i>
						<div class="list">
							
						</div>
					</li>
					<li>
						电视
						<i class="iconfont icon-arrow-right"></i>
						<div class="list">
							
						</div>
					</li>
					<li>
						笔记本 平板
						<i class="iconfont icon-arrow-right"></i>
						<div class="list">
							
						</div>
						</li>
					<li>
						家电
						<i class="iconfont icon-arrow-right"></i>
						<div class="list">
							
						</div>
					</li>
					<li>
						出行 穿戴
						<i class="iconfont icon-arrow-right"></i>
						<div class="list">
							
						</div>
					</li>
					<li>
						智能 路由器
						<i class="iconfont icon-arrow-right"></i>
						<div class="list">
							
						</div>
					</li>
					<li>
						电源 配件
						<i class="iconfont icon-arrow-right"></i>
						<div class="list">
							
						</div>
					</li>
					<li>
						健康 儿童
						<i class="iconfont icon-arrow-right"></i>
						<div class="list">
							
						</div>
					</li>
					<li>
						耳机 音响
						<i class="iconfont icon-arrow-right"></i>
						<div class="list">
							
						</div>
					</li>
					<li>
						生活 箱包
						<i class="iconfont icon-arrow-right"></i>
						<div class="list">
							
						</div>
					</li>
				</ul>
				<a href="#">
					<div class="leftbutton">
						<i class="iconfont icon-arrow-left"></i>
					</div>
				</a>
				<a href="#">
					<div class="rightbutton">
						<i class="iconfont icon-arrow-right"></i>
					</div>
				</a>
				<div class="choosebox">
					<div class="content">
						<div class="choosepic"></div>
						<div class="choosepic"></div>
						<div class="choosepic"></div>
						<div class="choosepic"></div>
						<div class="choosepic"></div>
					</div>
				</div>
			</div>
			<div class="line2">
				<div class="line2content">
					<div class="buttonbox">
						<!-- icon-task-management -->
						<a href="#">
							<div class="line2button">
									<i class="iconfont icon-success"></i>
									保障服务
							</div>
						</a>
						<a href="#">
							<div class="line2button">
								<i class="iconfont icon-manage-order"></i>
								企业团购
							</div>
						</a>
						<a href="#">
							<div class="line2button">
								<i class="iconfont icon-success"></i>
								F码通道
							</div>
						</a>
						<a href="#">
							<div class="line2button">
								<i class="iconfont icon-creditcard"></i>
								米粉卡
							</div>
						</a>
						<a href="#">
							<div class="line2button">
								<i class="iconfont icon-cart-Empty"></i>
								以旧换新
							</div>
						</a>
						<a href="#">
							<div class="line2button">
								<i class="iconfont icon-category"></i>
								话费充值
							</div>
						</a>
					</div>
					<div class="line2box">
						<a href="#">
							<img src="img/pic8.jpg" >
						</a>
					</div>
					<div class="line2box">
						<a href="#">
							<img src="img/pic9.jpg" >
						</a>
					</div>
					<div class="line2box">
						<a href="#">
							<img src="./img/pic10.png" >
						</a>
					</div>
				</div>
			</div>
		</main>
		<footer>
			<div class="foot-line1">
				<div class="imgbox">
					<img src="img/footerpic1.jpg" >
				</div>
			</div>
			<div class="foot-line2 clearfix">
				<span id="foot-tag">
					手机
				</span>
				<span id="searchmore">
					<a href="#">
						查看更多
						<i class="iconfont icon-arrow-right"></i>
					</a>
				</span>
			</div>
			<div class="foot-line3 clearfix">
				<img src="../img/line3pic1.jpg" >
				<div class="line3-card">
					<img src="../img/line3pic2.jpg" >
					<p>Xiaomi MIX 4</p>
					<p>CUP全面屏</p>
					<p>4999元起</p>
				</div>
				<div class="line3-card">
					<img src="../img/line3pic3.jpg" >
					<p>Xiaomi MIX 4</p>
					<p>CUP全面屏</p>
					<p>4999元起</p>
				</div>
				<div class="line3-card">
					<img src="../img/line3pic4.jpg" >
					<p>Xiaomi MIX 4</p>
					<p>CUP全面屏</p>
					<p>4999元起</p>
				</div>
				<div class="line3-card">
					<img src="../img/line3pic3.jpg" >
					<p>Xiaomi MIX 4</p>
					<p>CUP全面屏</p>
					<p>4999元起</p>
				</div>
				<div class="line3-card">
					<img src="../img/line3pic2.jpg" >
					<p>Xiaomi MIX 4</p>
					<p>CUP全面屏</p>
					<p>4999元起</p>
				</div>
				<div class="line3-card">
					<img src="../img/line3pic3.jpg" >
					<p>Xiaomi MIX 4</p>
					<p>CUP全面屏</p>
					<p>4999元起</p>
				</div>
				<div class="line3-card">
					<img src="../img/line3pic4.jpg" >
					<p>Xiaomi MIX 4</p>
					<p>CUP全面屏</p>
					<p>4999元起</p>
				</div>
				<div class="line3-card">
					<img src="../img/line3pic3.jpg" >
					<p>Xiaomi MIX 4</p>
					<p>CUP全面屏</p>
					<p>4999元起</p>
				</div>
			</div>
			<div class="foot-line2 clearfix">
				<span id="foot-tag">
					视频
				</span>
				<span id="searchmore">
					<a href="#">
						查看更多
						<i class="iconfont icon-arrow-right"></i>
					</a>
				</span>
			</div>
			<div class="foot-line4 clearfix">
				<div class="line4-card">
					<div class="imgbox">
						<div class="startbox">
							<div class="start"></div>
						</div>
					</div>
					<p>2021年春季新品发布会第一场</p>
				</div>
				<div class="line4-card">
					<div class="imgbox">
						<div class="startbox">
							<div class="start"></div>
						</div>
					</div>
					<p>Redmi 10x系列发布会</p>
				</div>
				<div class="line4-card">
					<div class="imgbox">
						<div class="startbox">
							<div class="start"></div>
						</div>
					</div>
					<p>小米10 青春版 发布会</p>
				</div>
				<div class="line4-card">
					<div class="imgbox">
						<div class="startbox">
							<div class="start"></div>
						</div>
					</div>
					<p>小米10 8k手机拍大片</p>
				</div>
			</div>
		</footer>
	</body>
</html>

<script type="text/javascript">
	var imglist = ["url('http://127.0.0.1:8848/cssAndHtml_daily_practise/%E5%B0%8F%E7%B1%B3%E9%A6%96%E9%A1%B5%E7%BB%83%E4%B9%A0/img/backimg1.jpg')",
	"url('http://127.0.0.1:8848/cssAndHtml_daily_practise/%E5%B0%8F%E7%B1%B3%E9%A6%96%E9%A1%B5%E7%BB%83%E4%B9%A0/img/backimg2.jpg')",
	"url('http://127.0.0.1:8848/cssAndHtml_daily_practise/%E5%B0%8F%E7%B1%B3%E9%A6%96%E9%A1%B5%E7%BB%83%E4%B9%A0/img/backimg3.jpg')",
	"url('http://127.0.0.1:8848/cssAndHtml_daily_practise/%E5%B0%8F%E7%B1%B3%E9%A6%96%E9%A1%B5%E7%BB%83%E4%B9%A0/img/backimg4.jpg')",
	"url('http://127.0.0.1:8848/cssAndHtml_daily_practise/%E5%B0%8F%E7%B1%B3%E9%A6%96%E9%A1%B5%E7%BB%83%E4%B9%A0/img/backimg5.jpg')"]
	var imgbox = document.getElementsByClassName("imgbox")[0];
	var choosepic = document.getElementsByClassName("choosepic")
	var leftbutton = document.getElementsByClassName("leftbutton")[0];
	var rightbutton = document.getElementsByClassName("rightbutton")[0];
	var timer;
	var temp = 0;
	timer = setInterval(function(){
		// console.log(getComputedStyle(imgbox,null)["backgroundImage"]);
		imgbox.style.backgroundImage = imglist[temp];
		choosed(choosepic[temp],choosepic,"choosed");
		temp++;
		if(temp >= imglist.length)
			temp-=imglist.length;
		
	},3000)
	for(let i = 0;i < choosepic.length;i++){
		choosepic[i].onclick = function(){
			clearInterval(timer);
			imgbox.style.backgroundImage = imglist[i];
			choosed(choosepic[i],choosepic,"choosed");
			temp = i;
			timer = setInterval(function(){
				// console.log(getComputedStyle(imgbox,null)["backgroundImage"]);
				imgbox.style.backgroundImage = imglist[temp];
				choosed(choosepic[temp],choosepic,"choosed");
				temp++;
				if(temp >= imglist.length)
					temp-=imglist.length;
				
			},3000)
		}
	}
	leftbutton.onclick = function(){
		clearInterval(timer);
		if(--temp < 0){
			temp += imglist.length;
		}
		imgbox.style.backgroundImage = imglist[temp];
		choosed(choosepic[temp],choosepic,"choosed");
		timer = setInterval(function(){
			// console.log(getComputedStyle(imgbox,null)["backgroundImage"]);
			imgbox.style.backgroundImage = imglist[temp];
			choosed(choosepic[temp],choosepic,"choosed");
			temp++;
			if(temp >= imglist.length)
				temp-=imglist.length;
			
		},3000)
	}
	rightbutton.onclick = function(){
		clearInterval(timer);
		if(++temp >= imglist.length){
			temp -= imglist.length;
		}
		imgbox.style.backgroundImage = imglist[temp];
		choosed(choosepic[temp],choosepic,"choosed");
		timer = setInterval(function(){
			// console.log(getComputedStyle(imgbox,null)["backgroundImage"]);
			imgbox.style.backgroundImage = imglist[temp];
			choosed(choosepic[temp],choosepic,"choosed");
			temp++;
			if(temp >= imglist.length)
				temp-=imglist.length;
			
		},3000)
	}
	
	function choosed(choosedobj,allobj,cn){
		var reg = new RegExp("\\b"+cn+"\\b")
		for(i = 0 ;i < allobj.length;i++){
			if(reg.test(allobj[i].className))
				allobj[i].className = allobj[i].className.replace(reg , "")
		}
		choosedobj.className +=" "+cn
	}
</script>